<template>
  <div class="search-header">
    <div class="btn_wrapper">
      <span class="tips">说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('/questions/new')">新增试题</el-button>
    </div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="form.subjectID" clearable @change="hSubject">
              <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="form.catalogID" clearable>
              <el-option v-for="item in directoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="form.tags" clearable>
              <el-option v-for="item in tagList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" clearable>
              <el-option v-for="item in questionType"
               :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" clearable>
              <el-option v-for="item in difficulty"
               :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="form.direction" clearable>
              <el-option v-for="item in direction"
               :key="item" :value="item" :label="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="form.creatorID" clearable>
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select v-model="form.province" clearable style="width: 48%; margin-right: 2%" @change="getCityData">
              <el-option v-for="item in provinceList" :key="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="form.city" clearable style="width: 50%;">
              <el-option v-for="item in cityList" :key="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="text-align: right">
            <el-button size="small" @click="reset">清除</el-button>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple as getSubject } from '@/api/hmmm/subjects'
import { simple as getDirectory } from '@/api/hmmm/directorys'
import { simple as getTag } from '@/api/hmmm/tags'
import { simple as getUser } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      form: {
        catalogID: '',
        tags: '',
        city: ''
      }, // form表单
      subjectList: [], // 学科列表
      directoryList: [], // 二级目录
      tagList: [], // 标签
      userList: [], // 录入人
      provinceList: [], // 市
      cityList: [], // 区
      questionType, // 试题类型
      difficulty, // 难度
      direction // 方向
    }
  },
  created () {
    this.getSubjectList()
    this.getUser()
    this.getCityData()
  },
  methods: {
    // 获取学科
    async getSubjectList () {
      const { data } = await getSubject()
      this.subjectList = data
    },
    // 修改学科数据
    async hSubject (subjectID) {
      // 清空二级目录及标签
      this.form.catalogID = null
      this.form.tags = null
      // 获取二级目录
      const res1 = await getDirectory({ subjectID })
      this.directoryList = res1.data
      // 获取标签
      const res2 = await getTag({ subjectID })
      this.tagList = res2.data
    },
    // 获取录入人
    async getUser () {
      const res = await getUser()
      this.userList = res.data
    },
    // 获取市
    getCityData () {
      this.provinceList = provinces()
      this.form.city = ''
      if (this.form.province) {
        this.cityList = citys(this.form.province)
      }
    },
    // 重置
    reset () {
      this.form = {
        catalogID: '',
        tags: ''
      }
    },
    // 搜索
    search () {
      this.$emit('search', this.form)
    }
  }
}
</script>

<style scoped lang="scss">
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  .tips {
    font-size: 12px;
    color: pink;
  }
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    .el-input,
    .el-select {
      width: 100%;
    }
  }
}
</style>
